import {TouchableOpacity} from 'react-native';
import {Img, ObserverView, Swiper} from '../../../components';
import {dpw12} from '../../../constants';
import {styles} from '../const';
import {observer} from 'mobx-react-lite';
import {useUserInfoStore} from '../../../mobx';

const Banner = observer((props: any) => {
  const {list, style, navigation} = props || {};
  const {userInfo} = useUserInfoStore();

  const goDetail = (bId: number) => {
    if (navigation) {
      if (!userInfo?.Token) {
        navigation.navigate('Login');
      } else if (bId) {
        navigation.navigate('cartoon-detail', {bId});
      }
    }
  };

  const renderItem = (item: any) => {
    return (
      <TouchableOpacity
        key={item.Title}
        style={{flex: 1}}
        onPress={() => goDetail(item.BID || item.BId)}>
        <Img
          url={item.CoverUrl || item.ImgUrl}
          isJoin={Boolean(item.CoverUrl)}
          style={styles.bannerImg}
          resizeMode="cover"
          borderRadius={0}
        />
      </TouchableOpacity>
    );
  };

  return (
    <ObserverView style={style || {paddingVertical: dpw12}}>
      <Swiper data={list} renderItem={renderItem} />
    </ObserverView>
  );
});

export default Banner;
